<template>
  <a-card :bordered="false">
    <div>
      <div style="margin-bottom: 16px">
        <a-button type="primary" @click="handleAdd"> 新增</a-button>
      </div>
      <!-- table区域-start -->
      <a-table
        :columns="columns"
        :data-source="dataSource"
        :loading="loading"
        :row-selection="rowSelection"
        :expanded-row-keys.sync="expandedRowKeys"
        @expandedRowsChange="handleExpandedRowsChange"
        @expand="expandSubmenu"
      >
        <!-- 服务图片 -->
        <template slot="iconUrl" slot-scope="text, record">
          <a-avatar shape="square" :size="64" :src="text" />
        </template>
        <!-- :row-selection="rowSelection" -->
        <!-- 是否开启 -->
        <template slot="isOpen" slot-scope="text, record">
          <a-switch default-checked :checked="record.isOpen == 1 ? true : false" @change="isOpenChange(record)" />
        </template>

        <!-- 状态 -->
        <template slot="status" slot-scope="text, record">
          <a-switch default-checked :checked="record.status == 1 ? true : false" @change="statusChange(record)" />
        </template>

        <!-- 操作 -->
        <template slot="operation" slot-scope="text, record">
          <a @click="handleAddSub(record)" v-if="record.parentId == 0">添加下级</a>
          <a-divider type="vertical" />
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a @click="handleDelete(record.id)">删除</a>
        </template>
      </a-table>
    </div>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <xhdjClassifyName-modal ref="modalForm" @ok="modalFormOk"></xhdjClassifyName-modal>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import XhdjClassifyNameModal from './modules/XhdjClassifyNameModal'

import { JeecgListMixin } from '@/mixins/JeecgListMixins.js'
import { serverXhdjClassifyNameQueryById } from '@/api/api'

import { httpAction } from '@/api/manage'

export default {
  name: 'XhdjClassifyNameList',
  mixins: [JeecgListMixin],
  components: {
    XhdjClassifyNameModal
  },

  data () {
    return {
      description: '服务分类管理页面',
      loading: false,
      // 表头
      columns: [
        {
          title: 'id',
          dataIndex: 'id',
          key: 'id',
          width: '15%'
        },
        {
          title: '分类名称',
          dataIndex: 'classifyName',
          key: 'classifyName'
        },
        {
          title: 'icon图片',
          dataIndex: 'iconUrl',
          key: 'iconUrl',
          scopedSlots: { customRender: 'iconUrl' }
        },
        {
          title: '是否开启',
          dataIndex: 'isOpen',
          key: 'isOpen',
          scopedSlots: { customRender: 'isOpen' }
        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          key: 'operation',
          width: '15%',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      data: [],

      rowSelection: {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows) //选中操作
        },
        onSelect: (record, selected, selectedRows) => {
          console.log(record, selected, selectedRows) //选中部分
        },
        onSelectAll: (selected, selectedRows, changeRows) => {
          console.log(selected, selectedRows, changeRows) //全部选中
        }
      },
      expandedRowKeys: [],
      url: {
        list: '/server/xhdjClassifyName/list',
        delete: '/server/xhdjClassifyName/delete',
        edit: '/server/xhdjClassifyName/edit'
        // deleteBatch: '/xhdjClassifyName/xhdjClassifyName/deleteBatch',
        // exportXlsUrl: 'xhdjClassifyName/xhdjClassifyName/exportXls',
        // importExcelUrl: 'xhdjClassifyName/xhdjClassifyName/importExcel'
      }
    }
  },
  computed: {
    // importExcelUrl: function () {
    //   return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    // }
  },
  methods: {
    // 是否开启
    isOpenChange (record) {
      console.log(record, !record.status)

      let a = {
        classifyName: record.classifyName,
        iconUrl: record.iconUrl,
        id: record.id,
        isOpen: record.isOpen ? 0 : 1,
        status: record.status
      }

      httpAction(this.url.edit, a, 'put').then(res => {
        if (res.success) {
          this.loadData()
          this.$message.success(res.message)
        } else {
          this.$message.warning(res.message)
        }
      })
    },

    // 改变状态
    statusChange (record) {
      console.log(record, !record.status)
      // record.status = !record.status
      let a = {
        classifyName: record.classifyName,
        iconUrl: record.iconUrl,
        id: record.id,
        isOpen: record.isOpen,
        status: record.status ? 0 : 1
      }

      httpAction(this.url.edit, a, 'put').then(res => {
        if (res.success) {
          this.loadData()
          this.$message.success(res.message)
        } else {
          this.$message.warning(res.message)
        }
      })
      // let a = {
      //   id: record.id,
      //   status:record.status ? 0:1,
      // }
      // httpAction(this.url.examine, a, 'post').then((res) => {
      //   if (res.success) {
      //    this.loadData()
      //   } else {
      //     that.$message.warning(res.message)
      //   }
      // })
    },

    // 添加下级
    handleAddSub (record) {
      this.$refs.modalForm.title = '添加下级'
      console.log(record)

      this.$refs.modalForm.edit({ parentId: record.id })
    },
    expandSubmenu (expanded, record) {
      console.log(expanded, record, '点击的数据')

      if (expanded && (!record.children || record.children.length === 0)) {
        console.log('点击的数据的子级')
        // serverXhdjClassifyNameQueryById({ parentId: record.id }).then(res => {
        //   if (res.success) {
        //     record.children = res.result
        //   }
        // })
      }
    },
    handleExpandedRowsChange (expandedRows) {
      // 展开列表
      console.log(expandedRows)
      this.expandedRowKeys = expandedRows
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
